<template>
  <view @click="handleSendVerCode">
    {{ beginning ? time + 's後重新獲取' : sendData.text }}
  </view>
</template>

<script>
  import {
    validate
  } from '@/common/utils/index'
  import {
    IS_DEV
  } from '@/common/config.js'
  export default {
    name: 'benben-input-code',
    props: {
      text: String,
      sendData: {
        type: [Object, Array],
        default: () => {
          return {
            type: '1',
            text: '请发送验证码',
            phone: '15000000000000'
          }
        },
      },
    },
    data() {
      return {
        beginning: false, // 显示倒计时,@Boolean
        time: 60, // 倒计时60S,@Number
        timer: null, // 计时器,@Function
      }
    },
    methods: {
      handleSendVerCode() {
        let _this = this
        // 从this里结构出来phone
        let {
          sendData: {
            type,
            phone
          },
        } = this
        // 验证手机号strat
        if (!phone) {
          this.$message.info('请输入手机号')
          return false
        }
        if (!validate(phone, 'phone')) {
          this.$message.info('请正确输入手机号')
          return false
        }
        // 验证手机号 end
        // 如果有倒计时，return false
        if (this.beginning) return false
        /**
         * @desc 请求验证码接口
         * @param {Object} {} - 参数
         * @param {Boolean} {}.is_test - 是否是测试环境
         * @param {String} {}.mobile - 手机号
         * @param {String} {}.type - 类型
         */
        this.$api
          .post('/v1/5b5bdc44796e8', {
            is_test: IS_DEV != 0 ? 1 : 0,
            mobile: phone,
            type: type,
          })
          .then((res) => {
            // 改加载状态为false
            // 如果后台返回的code码为1
            if (res.data.code == 1) {
              _this.beginning = true // 显示倒计时

              // 清除倒计时,防抖作用
              clearInterval(_this.timer)
              _this.timer = setInterval(() => {
                if (_this.time == 1) {
                  //倒计时结束就清楚这个倒计时
                  clearInterval(_this.timer)
                  _this.time = 60 // 倒计时60s
                  _this.beginning = false // 是否显示倒计时改为false
                  return
                }
                _this.time--
              }, 1000)
              // 向用户发送提示
              _this.$message.info('验证码发送成功')
            } else {
              // 如果报错，向用户提示
              _this.$message.info(res.data.msg)
            }
          })
          .catch(function(err) {
            // 接口错误打印错误
            console.log(err)
          })
      },
    },
    created() {},
  }
</script>

<style lang="scss" scoped></style>